<template>
	<view class="self-inspection">
		<view class="list-filter">
			<view class="filter-item" @click="showIndexList">
				{{projectName}}
				<u-icon name="arrow-down" size="14"></u-icon>
			</view>
		</view>
		<u-subsection :list="list" :current="curNow" @change="sectionChange"></u-subsection>
		<view class="self-date" @click="showSelfDate">
			{{selfDate}}
			<u-icon v-if="showArrow" name="arrow-up" size="14"></u-icon>
			<u-icon v-else name="arrow-down" size="14"></u-icon>
		</view>
		<view class="list-wrap">
			<view class="my-list">
				<view class="my-list-item" v-for="(item, index) in listPatrol" :key="item.id">
					<navigator :url="`../../packageD/detail/detail?id=${item.id}`">
						<view class="list-item-title">
							<view>
								<text class="title-txt">
									项目名称 {{ item.projectName }}
								</text>
							</view>
							<view>
								<text>
									检查人员 {{ item.checkPersonName }}
								</text>
								<text v-if="item.checkTime">
									检查时间 {{ item.checkTime | date('yyyy-mm-dd') }}
								</text>
								<text>
									所属区域 {{ item.areaName }}
								</text>
							</view>
						</view>
						<view class="list-content">
							<text v-if="item.problemDescribe || item.remark">
								{{ item.problemDescribe ? item.problemDescribe : item.remark }}
							</text>
							<text v-else>无</text>
						</view>
						<view class="list-time">
							<view v-if="item.isRectify == 1">
								<view v-if="item.rectified">{{ item.rectified }}</view>
								<view v-else>需整改</view>
							</view>
						</view>
						<scroll-view scroll-x="true" class="list-tags">
							<uni-tag class="tag-item" v-if="item.reportAreaName" type="primary" :text="`上报级别 ${item.reportAreaName}`"></uni-tag>
							<uni-tag class="tag-item" v-for="s in statusOpts[0]" v-if="s.id == item.status" :key="s.id"
								:type="s.id == 1 ? 'success' : 'warning'" :text="s.title"></uni-tag>
							<uni-tag class="tag-item" v-if="item.problemLevel == 0" type="primary" text="普通"></uni-tag>
							<uni-tag class="tag-item" v-if="item.problemLevel == 1" type="error" text="严重"></uni-tag>
							<uni-tag class="tag-item" v-if="item.problemLevel == 2" type="error" text="紧急"></uni-tag>
							<uni-tag class="tag-item" v-if="item.problemLevel == 3" type="error" text="重大"></uni-tag>	
							<uni-tag class="tag-item" v-if="item.executePersonName" type="success" :text="`已交办给-${item.executePersonName}`"></uni-tag>
						</scroll-view>
					</navigator>
					<u-gap height="5" bgColor="#eee"></u-gap>
				</view>
			</view>
		</view>
		<!-- 日期选择 -->
		<u-calendar :show="showDate" startText="开始" endText="结束" :formatter="formatter" confirmDisabledText="请选择结束日期" ref="calendar" showRangePrompt
       :maxDate="maxDate" :minDate="minDate" :mode="range" monthNum="24" @confirm="confirm" @close="close"></u-calendar>
	</view>
</template>

<script>
	import {getProjectIndex} from '@/api/global'
	import {getPatrolList} from '@/api/list'
	export default {
		data () {
			return {
				curNow: 0,
				list: ['巡检单', '已整改', '未整改'],
				projectList: [],
				projectName: '全部项目',
				showArrow: false,
				minDate: '2022-01-01',
				maxDate: '',
				showDate: false,
				selfDate: '日期选择',
				listPatrol:[],
				total:'',
				// 查询参数
				  queryParam: {
					pageNum: 1,
					pageSize: 10,
					isRectify: '',
					status: '',
					startTime: '',
					endTime: '',
					projectName: '',
				  },
			}
		},
		onReady() {
				// 如果需要兼容微信小程序的话，需要用此写法
				this.$refs.calendar.setFormatter(this.formatter)
			},
		onLoad(option) {
			if (Object.keys(option).length != 0) {
				this.projectName = this.queryParam.projectName = option.projectName
			}
			this.getlist()
			const datetime = new Date()
			const year = datetime.getFullYear()
			let month = datetime.getMonth()+1
			month = month < 10 ? `0${month}` : month
			const date = datetime.getDate()
			let str = month - 12
			if (str <=0) {
				let yearmin = year -1
				let monthmin = 12 + str
				this.minDate = `${yearmin}-${monthmin}-${date}`
			}
			this.maxDate = `${year}-${month}-${date}`
		},
		methods: {
			getlist() {
				getPatrolList(this.queryParam).then(res=>{
					this.listPatrol = this.listPatrol.concat(res.data.rows)
					this.total = res.data.total
				})
			},
			// 滚动到底部触发事件
			onReachBottom() {
				if (this.queryParam.pageNum * this.queryParam.pageSize >= this.total) {
						uni.showLoading({
							title: '加载中'
						});
						uni.showToast({
							title: '没有更多数据了',
							icon: 'none',
							duration: 2000
						});
						uni.hideLoading()
					} else {
						if (this.queryParam.pageNum <= this.queryParam.pageNum- 1) {
							uni.showLoading({
								title: '加载中'
							});
							uni.hideLoading()
						} else {
							uni.showLoading({
								title: '加载中'
							});
							this.queryParam.pageNum++
							this.getlist()
							uni.hideLoading()
						}
				}
			},
			onreset() {
				this.queryParam.pageNum = 1
				this.queryParam.pageSize = 10
				this.queryParam.isRectify = ''
				this.queryParam.status = ''
				this.queryParam.createtime = ''
				this.projectName = '全部项目'
			    this.listPatrol = []
			},
			// 下拉刷新
			onPullDownRefresh() {
				this.onreset()
				this.queryParam.pageNum = 1
				this.getlist()
				uni.stopPullDownRefresh()
			},
			// tab切换
			sectionChange(index) {
				this.curNow = index;
				this.listPatrol=[]
				if (this.curNow === 1) {
					this.queryParam.isRectify = '1'
					this.queryParam.status = 1,3
					this.getlist()
				} else if (this.curNow === 2) {
					this.queryParam.isRectify = '1'
					this.queryParam.status = 0,2
					this.getlist()
				} else {
					this.queryParam.isRectify = ''
					this.queryParam.status = ''
					this.getlist()
				}
			},
			// 点击全部项目
			showIndexList () {
				uni.navigateTo({
					url: '/packageB/selector/selector?from=' + 'engineering' + '&to=project-self'
				})
			},
			// 打开日历
			showSelfDate () {
				this.showDate = true
				this.showArrow = true
			},
			formatter(day) {
				const d = new Date()
				let month = d.getMonth() + 1
				const date = d.getDate()
				// if(day.month == month && day.day == date + 3)
				// {
					// day.dot = true
				// }
				return day
			},
			// 选择某一天
			confirm (item) {
				this.queryParam.startTime = item[0]
				const n = item.length - 1
				 if (n>=1) {
					 this.queryParam.endTime = item[n]
					 this.showDate = false
					 this.showArrow = false
					 this.selfDate = `${this.queryParam.startTime}---${this.queryParam.endTime}`
					 this.listPatrol=[]
					 this.getlist()
				 } else {
					 uni.showToast({
					 	title: '请选择时间范围',
						icon: 'none',
					 	duration: 2000
					 }) 
				 }
			},
			// 关闭日历
			close () {
				this.showDate = false
				this.showArrow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.self-inspection {
		font-size: 28upx;
		height: 100vh;
		.filter-item, .self-date {
			font-size: 32upx;
			flex-grow: 1;
			padding: 20upx 0;
			display: flex;
			justify-content: center;
			text-align: center;
			font-weight: bold;
		}
		.self-date {
			font-size: 28upx;
		}
		.list-record {
			background-color: $uni-bg-color-grey;
			padding-top:20upx;
			.record {
				background-color: $uni-bg-color;
				margin-bottom: 20upx;
					padding: 0 20upx;
				.record-status, .record-det, .record-checklist {
					padding: 20upx;
				}
				.record-status {
					display: flex;
					justify-content: space-between;
					line-height: 48upx;
				}
				.record-det {
					display: flex;
					flex-direction: column;
					background-color: $uni-bg-color-grey;
					line-height: 48upx;
					.num {
						color: #e85050;
					}
				}
				.record-checklist {
					line-height: 48upx;
					color: $uni-color-primary;
					text-align: right;
				}
			}
		}
		
		.list-wrap {
			padding-bottom: 100upx;
		
			.list-item-title {
				font-size: 24upx;
				border-bottom: 1px solid $u-light-color;
				padding: 15upx;
				color: $u-light-color;
		
				text {
					margin-right: 15upx;
				}
		
				.title-txt {
					padding-left: 10upx;
					border-left: 10upx solid $uni-color-primary;
					border-radius: 5upx;
				}
			}
		
			.list-content {
				padding: 15upx;
		
				text {
					word-wrap: break-word;
				}
			}
		
			.list-time {
				text-align: right;
				margin: 5upx 15upx 10upx 0;
				color: $u-light-color;
			}
		
			.list-tags {
				white-space: nowrap;
				width: 100%;
				height: 40upx;
				border-top: 1px solid $u-light-color;
				padding:10upx;
				.tag-item {
					margin-right: 5upx;
				}
			}
		}
	}
</style>
